<!-- 带资格角的盒子组件 -->
<template>
  <div class="box">
    <div class="header">
      <div class="left">
        <span>{{ boxTitle }}</span>
      </div>
    </div>
    <div class="bMiddlemain">
      <div class="imgleft">
        <div class="imgpng"></div>
        <div class="markCost">
          <span>标注成本</span>
          <p style="
              font-size: 28px;
              font-weight: 700px;
              font-style: normal;
              color: #00ffff;
            ">
            100
          </p>
          <span style="color: #557fb6; font-size: 16px; float: right">万元</span>
        </div>
        <div class="investment">
          <span>投资回报率</span>
          <p style="
              font-size: 28px;
              font-weight: 700px;
              font-style: normal;
              color: #00ffff;
            ">
            50%
          </p>
        </div>
        <div class="markCost2">
          <span>标注收入</span>
          <p style="
              font-size: 28px;
              font-weight: 700px;
              font-style: normal;
              color: #00ffff;
            ">
            150
          </p>
          <span style="color: #557fb6; font-size: 16px">万元</span>
        </div>
      </div>
      <div class="imgright">
        <h3 style="border-left: 5px solid #fff; padding-left: 5px">
          项目投资回报率top5
        </h3>
        <ul style="width: 100%; height: 100%">
          <li class="ulLi">
            <span class="lispan">1</span>
            <span>外汇政策性审核标注</span>
            <el-progress :percentage="50"
              style="width: 55%;"></el-progress>
          </li>
          <li class="ulLi">
            <span class="lispan">2</span>
            <span>稽核智能识别标注</span>
            <el-progress :percentage="42"
              style="width: 55%"></el-progress>
          </li>
          <li class="ulLi">
            <span class="lispan">3</span>
            <span>双录视频质检标注</span>
            <el-progress :percentage="38"
              style="width: 55%"></el-progress>
          </li>
          <li class="ulLi">
            <span class="lispan"
              style="background-color: rgba(204, 204, 204, 1)">4</span>
            <span>智能安防视频标注</span>
            <el-progress :percentage="27"
              style="width: 55%"></el-progress>
          </li>
          <li class="ulLi">
            <span class="lispan"
              style="background-color: rgba(204, 204, 204, 1)">5</span>
            <span>境内外申请书标注</span>
            <el-progress :percentage="20"
              style="width: 55%"></el-progress>
          </li>
        </ul>
      </div>
    </div>

    <div class="pos pos_bl"></div>
    <div class="pos pos_br"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  props: {
    // 盒子标题
    boxTitle: {
      type: String,
      default: () => {
        return "经营数据";
      }
    }
  },
  data() {
    return {
      showDropDown: false, // 是否展开下拉菜单
      activeDropDown: 0 // 当前选中的下拉菜单
    };
  },
  methods: {
    format(percentage) {
      return percentage === 100 ? "满" : `${percentage}%`;
    }
  },
  mounted() {}
};
</script>

<style lang="scss" scoped>
.box {
  position: relative;
  padding: 10px;
  background: #152149;
  background: url(~assets/boardImg/u160.svg) no-repeat;
  background-size: 100% auto;
  .header {
    height: 30px;
    .left {
      float: left;
      font-size: 0;
      span {
        display: inline-block;
        padding-left: 40px;
        // padding-top:12px;
        line-height: 30px;
        font-size: 18px;
        font-weight: bold;
        color: #fff;
        vertical-align: bottom;
      }
    }
  }
  .bMiddlemain {
    height: 335px;
    width: 100%;
    color: #fff;
    font-size: 15px;
    font-weight: 400px;
    .imgleft {
      height: 100%;
      width: 52%;
      float: left;
      text-align: center;
      padding-top: 2%;
      position: relative;
      .imgpng {
        height: 100%;
        width: 100%;
        background: url(~assets/boardImg/u367.png) no-repeat;
        background-size: 100% auto;
        background-position: 10px 50px;
      }
      .markCost {
        position: absolute;
        top: 23%;
        bottom: 0px;
        left: 20px;
      }
      .markCost2 {
        position: absolute;
        top: 25%;
        bottom: 0px;
        left: 65%;
      }
      .investment {
        position: absolute;
        top: 15%;
        bottom: 0px;
        left: 30%;
      }
    }
    .imgright {
      float: right;
      width: 48%;
      height: 100%;
      padding-top: 10px;
      overflow: hidden;
      .ulLi {
        height: 15%;
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        .lispan {
          width: 6%;
          height: 27%;
          text-align: center;
          align-items: center;
          padding: 2px 0;
          font-family: "Montserrat Bold", "Montserrat Regular", "Montserrat",
            sans-serif;
          // border: 1px solid #ff9900;
          border-radius: 2px;
          background-color: #ff9900;
        }
      }
    }
  }
  .pos {
    position: absolute;
    width: 20px;
    height: 20px;
    box-sizing: border-box;
  }
  .pos_bl {
    bottom: 0;
    left: 0;
    border-bottom: 2px solid #667aaa;
    border-left: 2px solid #667aaa;
  }
  .pos_br {
    bottom: 0;
    right: 0;
    border-bottom: 2px solid #667aaa;
    border-right: 2px solid #667aaa;
  }
}

</style>
